<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="生鲜, 电商, 水果, 蔬菜, 肉类, 海鲜">
    <meta name="description" content="这是一个生鲜电商平台示例页面">
    <meta name="author" content="作者名">
    <title>生鲜电商平台</title>
    <style>
        body {
            font-family: "楷体", "KaiTi";
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #f8f8f8;
            padding: 10px;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        header nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-around;
        }
        header nav ul li {
            float: left;
        }
        header nav ul li a {
            text-decoration: none;
            color: #333;
            padding: 10px 20px;
            display: block;
        }
        header nav ul li a:hover {
            background-color: #ddd;
        }
        .container {
            float: right;
            width: 90%;
            /*overflow: hidden; /* 清除浮动 */
        }
        .container1 {
            width: 100%;
            /*clear: both;/* 在浮动元素后加一个非浮动元素 */
            overflow: hidden; /* 确保浮动元素不影响后续元素，同时不受前面元素影响 */
        }
        .sidebar {
            width: 20%;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            float: left;
        }
        .content {
            width: 70%;
            float: right;
        }
        iframe {
            width: 100%;
            height: 100vh;
            border: none;
        }
        .footer1 {
            background-color: #f8f8f8;
            padding: 10px;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
        }
        footer {
            background-color: #f8f8f8;
            padding: 10px;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
            float: left;
            /*clear: both;*/
        }
    </style>
</head>
<body>

<header>
    <nav>
        <ul>
            <li><a href="标签.html">首页</a></li>
            <li><a href="美化.html">css</a></li>
            <li><a href="dom.html">DOM</a></li>
            <li><a href="event.html">事件</a></li>
            <li><a href="action.html">事件处理</a></li>
            <li><a href="alert.html">提示框</a></li>
        </ul>
    </nav>
</header>
<div style="float:left; width:3% ;border: solid 1px black" >dsf</div>
<div class="container1">
    <nav class="sidebar">
        <dl>
            <details open>
                <summary>水果</summary>
                <dd><a href="apple.html" target="productFrame">苹果</a></dd>
                <dd><a href="banana.html" target="productFrame">香蕉</a></dd>
            </details>
            <details>
                <summary>蔬菜</summary>
                <dd><a href="position.html" target="productFrame">定位</a></dd>
                <dd><a href="element.html" target="productFrame">元素</a></dd>
            </details>
            <details>
                <summary>肉类</summary>
                <dd><a href="beef.html" target="productFrame">牛肉</a></dd>
                <dd><a href="chicken.html" target="productFrame">鸡肉</a></dd>
            </details>
            <details>
                <summary>海鲜</summary>
                <dd><a href="shrimp.html" target="productFrame">虾</a></dd>
                <dd><a href="salmon.html" target="productFrame">三文鱼</a></dd>
            </details>
        </dl>
    </nav>

    <div class="content">
        <iframe name="productFrame" src="position.html"></iframe>
    </div>
</div>
<footer id="contact">
    <p>联系我们：1234567890</p>
</body>
</html>
